<template>
  <ContentBox class="district-summary" has-corner>
    <div class="district-summary__content">
      <ValueText :value="data.streetCount" unit="个" :icon="icon1" text="街道数" />
      <ValueText :value="data.communityCount" unit="个" :icon="icon1" text="小区总数" />
      <ValueText :value="data.area" unit="万㎡" :icon="icon1" text="总面积" />
      <ValueText :value="data.partyOrganizationsCount" unit="个" :icon="icon1" text="党组织数量" />
      <ValueText :value="data.houseCount" unit="户" :icon="icon2" text="总户数" />
      <ValueText :value="data.partyMassPost" unit="个" :icon="icon1" text="党群驿站" />
      <ValueText :value="data.sealCount" unit="个" :icon="icon1" text="可封闭小区" />
      <ValueText :value="data.reformCount" unit="个" :icon="icon1" text="改造小区数" />
    </div>
  </ContentBox>
</template>

<script>
import ContentBox from '@/components/ContentBox'
import ValueText from '@/components/ValueText'
import icon1 from '@/assets/icon-1.png'
import icon2 from '@/assets/icon-2.png'
import icon3 from '@/assets/icon-3.png'
export default {
  name: 'IllInfo',
  components: {
    ContentBox,
    ValueText
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      icon1,
      icon2,
      icon3
    }
  }
}
</script>

<style lang="scss">
.district-summary {
  width: $base * 1100px;
  height: $base * 90px;

  .district-summary__content {
    display: flex;
    width: $base * 1100px;
    margin: 0 auto;
    justify-content: space-around;
    padding: $base * 14px $base * 20px;
  }
}
</style>